<template>
  <el-dialog :modelValue="modelValue"
             :title="title === true ? '添加小蜜蜂' : '修改小蜜蜂' "
             :draggable="true"
             :destroy-on-close="true"
             @close="onClose">
    <el-form :model="form" :rules="rules" label-width="auto" style="max-width: 600px">

      <el-form-item label="昵称" prop="nickname">
        <el-input v-model="form.nickname" placeholder="请输入昵称"/>
      </el-form-item>


      <el-form-item prop="phone" label="手机号">
        <el-input v-model="form.phone" placeholder="请输入手机号"/>
      </el-form-item>

      <el-form-item prop="username" label="账号">
        <el-input v-model="form.username" placeholder="请输入账号"/>
      </el-form-item>


      <el-form-item prop="password" label="密码">
        <el-input v-model="form.password" placeholder="请输入密码"/>
      </el-form-item>


      <el-form-item label="状态" prop="status">
        <el-radio-group v-model="form.status">
          <el-radio :value="'0'">正常</el-radio>
          <el-radio :value="'1'">停用</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="省/市/区">
        <el-cascader placeholder="请选择地区" :options="regionData" v-model="form.area" style="width: 100%;"
                     :props="cascaderProps" @change="handleChange">
        </el-cascader>
      </el-form-item>

      <el-form-item prop="province" label="省份">
        <el-input v-model="form.province" :disabled="true"/>
      </el-form-item>

      <el-form-item prop="city" label="城市">
        <el-input v-model="form.city" :disabled="true"/>
      </el-form-item>

      <el-form-item prop="county" label="区/县">
        <el-input v-model="form.county" :disabled="true"/>
      </el-form-item>

      <el-form-item prop="managerId" label="推荐码">
        <el-input v-model="form.managerId" :disabled="true"/>
      </el-form-item>

      <el-form-item prop="remark" label="备注">
        <el-input v-model="form.remark" type="textarea"/>
      </el-form-item>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-form>
  </el-dialog>
</template>

<script setup>
import {reactive, ref} from 'vue'
import {useRequest} from 'vue-request'
import {saveInfo} from "@/api/sys/bees.js";
import {serverManager} from "@/stores/index.js";
import {regionData} from "element-china-area-data";


const props = defineProps({
  //控制显示
  modelValue: '',
  form: {},
  //title
  title: undefined
})

const emit = defineEmits([
  'update:modelValue',
  'update:form',
  'search'
])

//取消
function cancel() {
  reset()
  emit('update:modelValue', false)
}


const {runAsync: saveBees} = useRequest((d) => saveInfo(d), {manual: true})

//确认
async function submitForm() {
  //新增
  await saveBees(props.form).then((res) => {

    emit('search')
  })
  reset()
  emit('update:modelValue', false)
}


function onClose() {
  reset()
  emit('update:modelValue', false)
}

// 表单重置
function reset() {
  // eslint-disable-next-line no-sequences
  // (props.menuPerm.menuNodeAll = false),
  //     (props.menuPerm.menuExpand = false),
  //     (props.form = {
  //       id: undefined,
  //       roleName: undefined,
  //       roleKey: undefined,
  //       roleSort: 0,
  //       status: '0',
  //       menuIds: [],
  //       remark: undefined
  //     })
  // resetForm(props.form)
  emit('update:form', {
    beesId: undefined,
    nickname: '',
    phone: '',
    username: '',
    password: '',
    status: '0',
    area: [],
    province: '',
    city: '',
    county: '',
    managerId: serverManager.value.managerId,
    remark: ''
  })

}

// 自定义el-cascader的显示和传输数据
const cascaderProps = {
  value: 'label',
  label: 'label',
};

//省市区选择完后回显
let handleChange = (value) => {
   (value);
  if (value[1] === '市辖区') {
    props.form.province = value[1] //省
    props.form.city = value[0] //市
    props.form.county = value[2] // 区
  }else {
    props.form.province = value[0] //省
    props.form.city = value[1] //市
    props.form.county = value[2] // 区
  }


 
}
// 组件对外暴露一个方法 open，基于open传来的参数，区分添加还是编辑
// open({})  => 表单无需渲染，说明是添加
// open({ id, cate_name, ... })  => 表单需要渲染，说明是编辑
// open调用后，可以打开弹窗
const open = (row) => {
  dialogVisible.value = true
  getRoleList()
  // addManagerInfo.value = { ...row } // 添加 → 重置了表单内容，编辑 → 存储了需要回显的数据
}


// 表单校验
const rules = {
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { validator:function(rule,value,callback){
        if(/^1[34578]\d{9}$/.test(value) === false){
          callback(new Error("请输入正确的手机号"));
        }else{
          callback();
        }
      }, trigger: 'blur'
    },
  ],
  username: [
    {required: true, message: '账号不能为空', trigger: 'blur'}
  ],
  password: [
    {required: true, message: '密码不能为空', trigger: 'blur'}
  ],
  managerId: [
    {required: true, message: '代理人不能为空', trigger: 'blur'}
  ],
  nickname: [
    {required: true, message: '昵称不能为空', trigger: 'blur'}
  ]
}


</script>